<script setup>
  import { useQuasar } from '@teld/q-components';
  import { ref } from 'vue';

  const visible = ref(true);
  const componentColor = ref('#79b264');
  const type = ref('static');
  const handleToggleType = () => {
    type.value = type.value === 'static' ? 'dynamic' : 'static';
  };
  const staticItems = ref([
    {
        title: '新建',
        subtitle: '2023-01-02',
        name:'Qiaowl',
        side:'left',
        pic:'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
        body: '<div><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">1.将</span> <span style="color:var(--t-text-color);font-size:12px">处理说明</span>  <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【水电费水电费】</span> <br><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">2.将</span> <span style="color:var(--t-text-color);font-size:12px">重现步骤</span>  <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【瓦尔塔吞吞吐吐吞吞吐吐他他他他他他他他他他他他他瓦尔塔吞吞吐吐吞吞吐吐他他他他他】</span> <br><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">3.将</span> <span style="color:var(--t-text-color);font-size:12px">最后修改时间</span>  <span style="color:var(--t-text-color);font-size:12px"> 【2024-05-11 09:01:07.209】</span>   <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【2024-05-21 17:25:45.128】</span><br></div>'
      },
      {
        title: '已响应',
        subtitle: '2023-01-02',
        name:'Qiaowl',
        side:'right',
        pic:'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
        body: '<div><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">1.将</span> <span style="color:var(--t-text-color);font-size:12px">处理说明</span>  <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【水电费水电费】</span> <br><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">2.将</span> <span style="color:var(--t-text-color);font-size:12px">重现步骤</span>  <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【瓦尔塔吞吞吐吐吞吞吐吐他他他他他他他他他他他他他瓦尔塔吞吞吐吐吞吞吐吐他他他他他】</span> <br><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">3.将</span> <span style="color:var(--t-text-color);font-size:12px">最后修改时间</span>  <span style="color:var(--t-text-color);font-size:12px"> 【2024-05-11 09:01:07.209】</span>   <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【2024-05-21 17:25:45.128】</span><br></div>',

      },
      {
        title: '已处理',
        subtitle: '2023-01-02',
        name:'Qiaowl',
        side:'left',
        pic:'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
        body: '<div><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">1.将</span> <span style="color:var(--t-text-color);font-size:12px">处理说明</span>  <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【水电费水电费】</span> <br><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">2.将</span> <span style="color:var(--t-text-color);font-size:12px">重现步骤</span>  <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【瓦尔塔吞吞吐吐吞吞吐吐他他他他他他他他他他他他他瓦尔塔吞吞吐吐吞吞吐吐他他他他他】</span> <br><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">3.将</span> <span style="color:var(--t-text-color);font-size:12px">最后修改时间</span>  <span style="color:var(--t-text-color);font-size:12px"> 【2024-05-11 09:01:07.209】</span>   <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【2024-05-21 17:25:45.128】</span><br></div>',
      },
      {
        title: '已关闭',
        subtitle: '2023-01-02',
        name:'Qiaowl',
        side:'right',
        pic:'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
        body: '<div><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">1.将</span> <span style="color:var(--t-text-color);font-size:12px">处理说明</span>  <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【水电费水电费】</span> <br><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">2.将</span> <span style="color:var(--t-text-color);font-size:12px">重现步骤</span>  <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【瓦尔塔吞吞吐吐吞吞吐吐他他他他他他他他他他他他他瓦尔塔吞吞吐吐吞吞吐吐他他他他他】</span> <br><span style="color:rgba(0, 0, 0, 0.56);font-size:12px; ">3.将</span> <span style="color:var(--t-text-color);font-size:12px">最后修改时间</span>  <span style="color:var(--t-text-color);font-size:12px"> 【2024-05-11 09:01:07.209】</span>   <span style="color:var(--t-color);font-size:12px">修改为</span>  <span style="color:var(--t-text-color);font-size:12px">【2024-05-21 17:25:45.128】</span><br></div>'
      }
  ]);
  const listDataSource = ref([
    {
      title: '我是动态数据源',
      body: '(body内容)This is the first entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timeline.',
      subtitle: '2022-01-01',
      color: 'blue',
      pic: 'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
      name: '我是name字段',
      text: '新建',
    },
    {
      title: '我是动态数据源',
      body: '(body内容)This is the first entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timeline.',
      subtitle: '2022-01-01',
      pic: 'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
      name: '我是name字段',
      text: '新建',
    },
    {
      title: '我是动态数据源',
      body: '(body内容)This is the first entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timelineThis is the third entry on the timeline.',
      subtitle: '2022-01-01',
      pic: 'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322312980333.jpg',
      name: '我是name字段',
      text: '新建',
    },
  ]);
</script>

<template>
  <div class="q-pa-lg">
    <t-timeline
      :componentColor="componentColor"
      :itemsDataSourceType="type"
      :staticItems="staticItems"
      :listDataSource="listDataSource"
      :visible="visible"
    >
    </t-timeline>
  </div>
</template>


<style>
      .t-timeline{
    .t-timeline-title {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        display: inline-flex;
        text-transform: none;
      }
      .t-timeline-subtitle {
        font-size: 12px;
      }
      .q-timeline h6{
        font-size: 12px;
        color: rgba(0,0,0,0.32);
        font-weight: bold;
        font-family: 'AlibabaPuHuiTi';
      }
      .t-timeline__entry--icon .t-timeline__dot:after{
       left: 17px;
      }
      .t-timeline-line {
        background: #9b9b9b; /*背景色为浅灰色*/
        width: 1px; /*设置宽高*/
        height: 16px;
        margin-left: 20px;
      }
      .t-timeline-titletext{
        margin-left: 10px;
        font-size: 12px;
      }
      .t-timeline-titleavator {
        margin-left: 10px;
      }
      /* .t-timeline--dense--right .t-timeline__entry--icon .t-timeline__dot{
        left: 8px;
      } */
    .t-icon:before, .t-icon:after{
        width: 100%;
        height: 100%;
        display: flex!important;
        align-items: center;
        justify-content: center;
        padding-top: 2px;
        font-size: 20px;
    }
    .q-timeline__dot:before{
      width: 14px;
      height: 14px;
      left: 1px;
      border: 0px solid transparent;
    }
  }
  .q-timeline{
    outline: 0!important;
  }
  .q-timeline__title{
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
  }
  .t-timeline-body{
    font-size: 14px;
  }

</style>
